<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/shouye.css') }}">
    <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/edit_student.js"></script>
    <script>
        function delete_student(id) {
            var id = document.getElementById("DanbatchDeleteBtn"+String(id)).value;
            $.ajax({
                url: '/delete_student/' + id,
                type: 'POST',
                data: {
                    id: id
                },
                contentType: 'application/json',
                dataType: 'json',        
                success: function(data) {
                    if (data.message) {
                        alert('删除成功！');
                        window.location.href = 'shouye';
                    } else {
                        alert('删除失败！');
                    }
                }
            });
        }
        function edit_student(id){
            batchUpadateBtnid = document.getElementById("batchUpadateBtn"+ String(id)).value;
            $.ajax({
                url: "/edit_student",
                method: 'post',
                contentType: "application/json",
                dataType: "json",
                data:{
                    id: batchUpadateBtnid,
                },
                success: function(data) {
                    alert(data.result)
                }
            });
        }
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1>学生管理系统-首页</h1>
        </header>

        <section class="search-section">
            <input type="text" id="searchInput" placeholder="输入学生姓名或ID">
            <button id="searchBtn">查询</button>
        </section>

        <section class="student-list">
            <button id="batchDeleteBtn">批量删除</button>
            <button id="batchAddBtn" type="button" onclick="location.href='{{ url_for('jump_to_add_student')}}'">增加学生</button>
            <table>
                <thead>
                    <tr>
                        <th>复选框</th>
                        <th>学生ID</th>
                        <th>姓名</th>
                        <th>分数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="students">
                    {% for student in students %}
                        <tr>
                            <td width="50px"><input type="checkbox"  class="studentCheckbox" value="{{ student[0] }}"></td>
                            <td width="100px">{{ student[0] }}</td>
                            <td>{{ student[1] }}</td>
                            <td>{{ student[2] }}</td>
                            <td width="300px">
                                <button id="DanbatchDeleteBtn{{ student[0] }}" type="button" value="{{ student[0] }}" onclick="delete_student({{ student[0] }})")>删除学生</button>
                                <button id="batchUpadateBtn {{ student[0] }}" type="button" value="{{ student[0] }}" onclick="edit_student({{ student[0] }})"> 修改学生</button>
                            </td>
                        </tr>
                    {% endfor %}
                    
                </tbody>
            </table>
        </section>
   
        <section class="pagination-section">
            <button id="prevPage">上一页</button>
            <span id="currentPage">1</span>
            <button id="nextPage">下一页</button>
        </section>
    </div>
    <!-- 弹窗背景 -->
    <div id="modal" class="modal">
        <!-- 弹窗内容 -->
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <h2>修改学生信息</h2>
            <form id="studentForm">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required><br>
                <label for="age">年龄：</label>
                <input type="number" id="age" name="age" required><br>
                <label for="grade">年级：</label>
                <input type="text" id="grade" name="grade" required><br>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required><br>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
</body>
</html>